<template>
	<view class="logistics-detail">
		<!-- detail.number -->
		<view class="panle-box" v-if="detail.number">
			<view class="u-flex wuliu">
				<!-- <image style="width: 54rpx;height: 54rpx;border-radius: 50%;" class="logo" :src="detail.logo" mode=""></image> -->
				<view class="u-flex-1 u-line-1" style="min-width: 0;">
					<text class="padding-right: 10rpx">{{detail.typename}}:</text>{{detail.number}}
				</view>
				<!-- <view class="">复制</view> -->
			</view>
			<view class="card">
				<view class="shop u-flex" style="color:#404546">
					<image style="width:24rpx;height:25rpx;margin-right:6rpx" src="../../../static/order/shop.png" mode=""></image>
					<view class="u-flex-1 u-line-1" style="min-width: 0;">{{merchantName}}</view>
				</view>
				<view class="u-flex">
					<image style="width:100rpx;height:100rpx;margin-right:6rpx;border-radius:8rpx;" :src="orderProductImgUrl" mode=""></image>
					<view class="card-info ">
						<view class="u-line-1" style="color:#000000">{{orderProductName}}</view>
						<view style="color:#357CD4;margin-top: 10rpx;">￥{{totalAmount}}</view>
						<view class="u-line-1" style="margin-top: 10rpx;">订单编号：{{orderNo}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="panle-box" v-if="detail.number">
			<view class="u-flex wuliu-status">
				<image style="width:54rpx;height:54rpx;margin-right:37rpx;border-radius:50%;" :src="orderProductImgUrl" mode=""></image>
				<view>物流信息</view>
			</view>
			<u-time-line>
				<u-time-line-item v-for="(activity, index) in activities" :key="index">
					<template v-slot:node>
						<view class="u-node" style="background:#357CD4;width: 18rpx;height: 18rpx;border-radius: 50%;">
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-time">{{activity.time}}</view>
							<view class="u-order-desc">{{activity.status}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<u-empty v-if="!detail.number" text="暂无物流信息" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activities: [],
				deliveryMobile: '',
				courierNo: '',
				detail: {},
				orderNo: '',
				merchantName: '',
				orderProductName: '',
				totalAmount: '',
				orderProductImgUrl: ''
			}
		},
		onLoad(option) {
			this.deliveryMobile = option.deliveryMobile;
			this.courierNo = option.courierNo;
			this.orderNo = option.orderNo;
			this.merchantName = option.merchantName;
			this.orderProductName = option.orderProductName;
			this.totalAmount = option.totalAmount;
			this.orderProductImgUrl = option.orderProductImgUrl;
			this.getData()
		},
		methods: {
			getData() {
				this.$u.api.getMallOrderLogistics({
					mobile: this.deliveryMobile,
					number: this.courierNo
				}).then(res => {
					if (res.code == 0) {
						this.activities = res.data.data.list;
						this.detail = res.data.data;
					} else {
						uni.showToast({
							icon:'none',
						    title: '没有可查询的物流信息！'
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.logistics-detail {
		padding: 25rpx;
	}
	.panle-box {
		margin-bottom: 12rpx;
		padding: 0 25rpx 22rpx 25rpx;
		box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(150, 150, 150, 0.3);
		border-radius: 20rpx;
	}
	.logo {
		margin-right: 13rpx;
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
	}
	.wuliu {
		padding: 30rpx 0;
		color: #646464;
	}
	.card {
		padding: 0 26rpx;
		padding-bottom: 34rpx;
		background-color: #F3F3F3;
		font-size: 24rpx;
		color: #646464;
	}
	.shop {
		padding: 18rpx 0;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #C8C8C8;
	}
	.card-info {
		min-width: 0;
		
	}
	.wuliu-status {
		padding-top: 47rpx;
		margin-bottom: 26rpx;
		color: #357CD4;
		font-size: 28rpx;
	}
	.u-order-time {
		font-size: 28rpx;
	}
	.u-order-desc {
		font-size: 24rpx;
	}
</style>
